@import "base.less";


@main_Color:#8AFCF9;
@second_Color:#DFB8F8;
@active_Color:#0094ff;
@yellow_Color:#289eda;

    
    @media screen and (min-width: 375px) {
        body {
            background: cyan;   
        }
        .h1{
            .fs(22, 37.5);
            color: @main_Color;
            text-align: center;
        }
        .h4{
            .fs(20, 37.5);
            color: @main_Color;
            text-align: center;
        }
        .h4_T{
            .fs(18, 37.5);
            color: @active_Color;
            text-align: center;
        } 
        .father{
            .w(100, 37.5);
            .h(100, 37.5);
            margin: 0 auto;
            box-sizing: border-box;
            padding: 10%;
            background: #0094ff; 
            .add{
                width: 80%;
                height: 80%;
                background: #8AFCF9;
                margin: 10% auto;
            } 
        }
        .one{
            .fs(22, 37.5);
            color: @active_Color;
        }
        .two{
            .fs(20, 37.5);
            color: yellowgreen;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background: #28092e;   
        }
        .h1{
            .fs(22, 60);
            color: @main_Color;
            text-align: center;
        }
        .h4{
            .fs(20, 60);
            color: @main_Color;
            text-align: center;
        }
        .h4_T{
            .fs(18, 60);
            color: @active_Color;
            text-align: center;
        } 
        .father{
            .w(400, 60);
            .h(400, 60);
            margin: 0 auto;
            box-sizing: border-box;
            padding: 10%;
            background: #0094ff; 
            .add{
                width: 80%;
                height: 80%;
                background: #8AFCF9;
                margin: 10% auto;
            } 
        }
        .one{
            .fs(22, 60);
            color: @active_Color;
        }
        .two{
            .fs(20, 60);
            color: yellowgreen;
        }
    }
   
   




//.father{
//  .w(300);
//  .h(300);
//  margin: 0 auto;
//  box-sizing: border-box;
//  padding: 10%;
//  background: #0094ff; 
//  .add{
//      width: 80%;
//      height: 80%;
//      background: #8AFCF9;
//      margin: 10% auto;
//  } 
//}

